<template>
  <div class="device-info q-mb-md">
    <div class="flex justify-between q-mb-md">
      <div class="plan-title">{{title}}</div>
      <div>
            <q-btn class="qa-btn margin-r-10"
                   outline
                   color="primary"
                   :disable="tableData.length >= 200"
                   @click="onAddDevice">添加设备</q-btn>
      </div>
    </div>
    <div class="page-content" style="max-height: 500px">
      <q-table :data="tableData"
                 :columns="columns"
                 row-key="id"
                 class="myTable scroll stick-to-top"
                 :loading="isTableLoading"
                 :pagination.sync="pagination"
                 style="height: 500px; margin: 0"
                 :hide-bottom="tableData.length > 0"
                 color="primary">
      <template v-slot:body-cell-index="props">
        <q-td>
          {{props.row.__index + 1}}
        </q-td>
      </template>
      <template v-slot:body-cell-deviceTypeName="props">
        <q-td>
          {{props.row.deviceTypeName || props.row.deviceType | toHorizontalLine }}
        </q-td>
      </template>
      <template v-slot:body-cell-model="props">
        <q-td>
          {{props.row.model || props.row.deviceModel | toHorizontalLine }}
        </q-td>
      </template>
      <template v-slot:body-cell-operations="props">
        <q-td
          class="operations"
          style="width: 100px"
        >
          <div class="btn-group text-center">
            <table-btn btnType="delete" @click="deleteMaintenanceItem(props.row)"/>
          </div>
        </q-td>
      </template>
    </q-table>
    </div>
    <deviceSelectDialog :show="isShowDeviceSelectDialog"
                        @onSelect="onSelect"
                        :isShowWorkShop="isShowWorkShop"
                        :parentWorkshop="tableData"
                        @close="isShowDeviceSelectDialog = false"></deviceSelectDialog>
  </div>
</template>
<script>
import deviceSelectDialog from 'src/components/common-dialog/device-select-dialog'
import _ from 'lodash'
export default {
  name: 'device-info',
  components: {
    deviceSelectDialog
  },
  props: {
    title: String,
    isShowWorkShop: Boolean
  },
  data () {
    return {
      isShowDeviceSelectDialog: false,
      isTableLoading: false,
      tableData: [],
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'assetNumber', label: '设备编号', align: 'left', field: 'assetNumber' },
        { name: 'name', label: '设备名称', align: 'left', field: 'name' },
        { name: 'deviceTypeName', label: '设备类型', align: 'left', field: 'deviceTypeName' },
        { name: 'model', label: '设备型号', align: 'left', field: 'model' },
        { name: 'workShopName', label: '所在车间', align: 'left', field: 'workShopName' },
        { name: 'operations', label: '操作', align: 'center', field: 'operations' }
      ]
    }
  },
  methods: {
    refreshData () {
      // 刷新数据
      this.tableData = []
    },
    // 编辑的时候初始化数据
    initData (val) {
      this.tableData = val
      this.setTableData()
    },
    onAddDevice () {
      this.isShowDeviceSelectDialog = true
    },
    onSelect (val) {
      this.isShowDeviceSelectDialog = false
      this.tableData = [...this.tableData, ...val]
      this.setTableData()
    },
    deleteMaintenanceItem (row) {
      const member = [row]
      this.tableData = _.differenceBy(this.tableData, member, 'id')
      this.setTableData()
    },
    setTableData () {
      this.$emit('getDevice', this.tableData)
    }
  }
}
</script>
<style scoped lang="scss">
</style>
